<!--  -->
<template>
  <div class="home">
    <div class="title">
      <span class="s3" @click="xzks">{{ obj.dq ? obj.dq : "请选择考试" }}</span>
      <li class="l3"><van-icon @click="ss" name="search" /><van-icon name="points" /></li>
    </div>
    <div class="box1" v-if="obj.show">
      <van-popup position="bottom" v-model:show="obj.show">
        <div class="tcc1" v-if="obj.dqxs == 0">
          <h2 cl>选择考试</h2>
          <li
            :class="obj.num == index ? 'ys' : 'l1'"
            v-for="(item, index) in obj.list"
            @click="djtcc1(index, item)"
          >
            <p>{{ item.title }}</p>
            <p>{{ item.brief }}</p>
          </li>
        </div>
        <div class="tcc1" v-if="obj.dqxs == 1">
          <li class="l2">
            <span @click="fh">◀</span>
            <h2 cl>经济类联考</h2>
            <span></span>
          </li>
          <li
            :class="obj.num1 == index ? 'ys' : 'l1'"
            v-for="(item, index) in obj.lk"
            @click="scc1(index, item)"
          >
            {{ item }}
          </li>
        </div>
        <div class="tcc1" v-if="obj.dqxs == 2">
          <li class="l2">
            <span @click="obj.dqxs = 1">◀</span>
            <h2 cl>经济类联考</h2>
            <span v-show="obj.wc == true" @click="djwc" class="s1">完成</span>
            <span v-show="obj.wc == false"></span>
          </li>
          <li
            :class="obj.num2 == index ? 'ys' : 'l1'"
            v-for="(item, index) in obj.list1"
            @click="scc2(index, item)"
          >
            {{ item.major_name }}
          </li>
        </div>
      </van-popup>
    </div>
    <div class="box2" v-if="obj.ttt.length > 0">
      <van-tabs
        v-model:active="obj.active"
        title-active-color="green"
        @click-tab="ttb"
      >
        <van-tab v-for="(item, index) in obj.navtab" :title="item.title">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item2, index2) in obj.lbt"
              ><img class="ii" @click="tzxq(item2)" :src="item2.banner_img" alt=""
            /></van-swipe-item>
          </van-swipe>
          <li>
            <span @click='sxx(item1,index1)' v-for="(item1, index1) in item.child" :class='obj.op==index1?"sy1":"sy"'>{{
              item1.title
            }}</span>
          </li>
          <p class="pp">距离考研还有198天</p>
          <div class="mfzb" v-if="obj.active == 0">
            <li class="nn">
              <span style="font-weight: 600; font-size: 16px">{{obj.biaoti}}</span>
              <span @click='tzgkk'>查看全部></span>
            </li>
            <div class="ttt">
              <li class="lk" v-for="(item4, index4) in obj.mfzbk" @click="tzxq1(item4)">
                <img class="ik" :src="item4.teacher[0].avatar" alt="" />
                <li class="pp1">{{ item4.title }}</li>
                <span class="jj">{{item4.price==0?'免费':item4.price/100}}</span>
                <p style="margin:10px 0; color:#f15a24">已有{{item4.sales_num}}人报名</p>
              </li>
            </div>
            <div class="ffy" style='font-size:18px; font-weight:600;margin-top:10px;'>{{obj.biaoti1}}</div>
          </div>
         <div class="spkk" v-for='(it1,in1) in obj.lists' @click="tzxq1(it1)">
            <span class="ttt1">{{ it1.course_classify_title }}</span>
            <li class="mn">
        <span>{{ it1.title }}</span>
      </li>
      <ul>
        <li class="bc" v-for="(it2, in2) in it1.teacher">
          <img class="ii1" :src="it2.avatar" alt="" />
          <span>{{ it2.teacher_name }}</span>
        </li>
      </ul>
       <p class="hh" v-if="it1.stock">限{{it1.stock}}人</p>
      <li class="cc" >
        <span>{{it1.sales_num}}人已报名</span>
        <li class='hh'><span class="ss1">￥{{it1.vip_price/100}}</span><span class='ss2'>￥{{it1.price/100}}</span></li>
      </li>
         </div>
        </van-tab>
      </van-tabs>
    </div>
   
  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from "vue";
import {useRouter} from 'vue-router'
import { getksfl, getksfl2, gettab, getlbt, mfzb,biaoti,fybr,getlist } from "../http/api.js";
const wc = ref(null);
const router=useRouter()
let obj = reactive({
  active: 0,
  show: false,
  list: [],
  list1: [],
  num: 999,
  num1: 999,
  num2: 999,
  dqxs: 0,
  wc: false,
  ttt: [],
  lk: ["在校生", "在职"],
  dq: "",
  id: 23323,
  navtab: [],
  lbt: [],
  // kaid
  cpid: 1,
  mfzbk: [],
  biaoti:'',
  biaoti1:'',
  lists:[],
  op:999
});
obj.ttt = JSON.parse(localStorage.getItem("ttt")) || [];
if (obj.ttt.length > 0) {
  obj.id = obj.ttt[0].id;
  obj.dq = obj.ttt[0].title;
}
// 点击跳转详情
const tzxq =(i)=>{
  router.push({path:'/xq',query:{id:i.link}})
console.log(i);
}
const tzxq1 =(i)=>{
  router.push({path:'/xq',query:{id:i.id}})
console.log(i);
}
// 点击公开课跳转
 const tzgkk=()=>{
   console.log(obj.id);
   router.push({path:'/gkk',query:{id:obj.id}})
 }
// 点击筛选
 const sxx = async(i,index)=>{
 obj.op=index
 const res =await getlist(i.id)
 obj.lists=res.data.data
 console.log('aaa',res);
 }
// 获取tab对应的list
const gettabs= async(id)=>{
  const res =await getlist(id)
  console.log(res);
  obj.lists=res.data.data
  // console.log(obj.lists);
}
//  获取下方标题
const hqbt =async(id)=>{
  const res =await fybr(id)
  
  obj.biaoti1=res.data.data.model_name
  
}
// 获取标题
const getbt =async()=>{
  const res = await biaoti(obj.id)
 
 obj.biaoti=res.data.data.model_name
}

// 点击搜索
const ss =()=>{
  router.push('/about')
}
// 点击tab切换
const ttb = () => {
  obj.op=999
  if (obj.active == 0) {
    getbt()
    mfzb1(obj.id);
    hqbt(obj.id)
    gettabs(obj.id)
  } else {
    obj.cpid = obj.navtab[obj.active].id;
    hqbt(obj.cpid)
    gettabs(obj.cpid)
  }
};
// 获取免费直播课
const mfzb1 = async (id) => {
  const res = await mfzb(id);
  // obj.lists=res.data.data.course_list
  obj.mfzbk = res.data.data.course_list.slice(0, 3);
  // obj.mfzbk = obj.mfzbk.
  
};
// 点击选择考试
const xzks = () => {
  obj.show = true;
  obj.ttt = [];
};
// 点击返回
const fh = () => {
  obj.dqxs = 0;
  obj.list1 = [];
};
// 点击完成
const djwc = () => {
  localStorage.setItem("ttt", JSON.stringify(obj.ttt));
  obj.dq = obj.ttt[0].title;

  obj.show = false;
  obj.dqxs = 0;
  
  // 请求tab切换数据
  hqbt(obj.id)
  gettabs(obj.id)
  tabqh();
  getlbt1();
  getbt()
  mfzb1(obj.id)
};
// 获取轮播图
const getlbt1 = async () => {
  const res = await getlbt(obj.id);
  obj.lbt = res.data.data;
  
};
const tabqh = async () => {
  const res = await gettab(obj.id);
  
  obj.navtab = res.data.data;
  obj.navtab.unshift({ title: "精选", id: 999 });
  
};
// 点击第三组
const scc2 = (i, item) => {
  obj.num2 = i;
  obj.wc = true;
  obj.ttt.push(item);
};
// 点击第二组
const scc1 = (i, item) => {
  obj.num1 = i;
  obj.dqxs = 2;
  obj.num2 = 999;
  obj.ttt.push(item);
  obj.wc = false;
};
// 点击选项高亮+请求
const djtcc1 = async (i, item) => {
  (obj.num1 = 999), (obj.num2 = 999);
  obj.num = i;
  obj.dqxs = 1;
  const res = await getksfl2(item.id);
  obj.ttt.push(item);
  obj.id = item.id;
 
  // obj.dq = item.title;
  obj.list1 = res.data.data;
};
const getfl = async () => {
  const res = await getksfl();
  
  obj.list = res.data.data;
};
obj.active=0
if (localStorage.getItem("ttt")) {
  obj.show = false;
  tabqh(obj.id);
  hqbt(obj.id)
  getlbt1();
  mfzb1(obj.cpid);
  getbt(obj.id)
  gettabs(obj.id)
} else {
  obj.show = true;
}
getfl();
</script>
<style lang="scss" scoped>

.home{
  height: 100%;
  width: 100%;
  
  padding-bottom:120px;
}
.ss1{
  text-decoration:line-through;
  color: #ccc;
}
.cc{
  display: flex;
  justify-content:space-between;
}
.ss2{
  color:red;
}
.cc{
  margin-top: 10px;
  padding: 15px;
}
.hh{
  margin-top: 10px;
}
.jj{
  display: inline-block;
  padding:7px 15px;background: #f15a24;color: #fff;border-radius: 15px;margin-top: 15px;
}
ul {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  li{
    margin: 10px;
  }
  padding: 15px;
}
.ii1 {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.ttt1{
   display: inline-block;
  padding: 3px 10px;
  background: #f15a24;
  color: #fff;
  margin: 15px;
}
.mn{ padding: 0 30px;
  margin-top: 10px;}
.bc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 14px;
}
.pp1 {
  margin-top: 80px;
  height: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -moz-box;
  -moz-line-clamp: 3;
  -moz-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;

}
.ttt {
  display: flex;
  justify-content: flex-start;
  box-sizing: border-box;
  // padding: 10 10px;
  margin-top: 50px;
}
.ik {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: -30px;
  border: 1px solid #f18d00;
}
.lk {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 33%;
  justify-content: center;
  align-items: center;
  margin: 3px;
  background: #ccc;
  box-sizing: border-box;
  padding: 0 13px;
}
.nn {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  margin-top: 10px;
}
.sy {
  display: inline-block;
  margin: 10px;
  padding: 15px;
  background: #fff4e5;
  border: #f18d00;
}
.sy1{
   display: inline-block;
  margin: 10px;
  padding: 15px;
  background: #f18d00;
  border: #754605;
}
.pp {
  text-align: center;
  font-size: 16px;
  margin-top: 10px;
}
.ii {
  height: 300px;
  width: 90%;
  margin: 0 auto;
  border-radius: 10px;
}
:deep(.van-swipe__track) {
  text-align: center;
  margin-top: 15px;
}
.s3 {
  font-size: 25px;
  font-weight: 600;
}
.title {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  .van-icon {
    margin-right: 10px;
  }
}
.l3 {
  font-size: 60px;
}
.s1 {
  background: #f15a24;
  display: inline-block;
  padding: 10px;
  border-radius: 15px;
  color: #fff;
}
.l2 {
  display: flex;
  justify-content: space-between;
}
* {
  font-size: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.van-tab {
  font-size: 16px;
  
}
:deep(.van-popup) {
  padding: 15px 30px;
  text-align: center;
  box-sizing: border-box;
}
.l1 {
  text-align: center;
  padding: 10px 10px;
  background: #f8f8f5;
  border-radius: 30px;
  margin: 10px;
  font-size: 18px;
}
.ys {
  background: #f15a24;
  color: #fff;
  border-radius: 30px;
  text-align: center;
  padding: 10px 10px;
  margin: 10px;
  font-size: 18px;
}
</style>
